<!--
* @Author: dgiot-fe <dgiot@foxmail.com>
* @Date: 2022-03-29 20:02:43
* @LastEditors: 20:02
* @LastEditTime: 2022-03-29 20:02:43
* @Description:
* @FilePath: src\views\CloudOc\MetaData\index.vue
* @DocumentLink: https://dev.iotn2n.com
* @github: https://github.com/dgiot/dgiot-dashboard.git
* @name: index
https://www.dgiotcloud.cn/wp-content/uploads/2022102808590871.png
-->
<template>
  <div ref="custom-table" v-loading="loading" class="index-container">
    <!-- <div v-show="dialog" v-if="dialog" class="dialog_wrap"> -->
      <amis
        v-if="dialog"
        modal-append-to-body
        :schema="viewData"
        :show-help="false"
      />
      <!-- <dgiot-amis modal-append-to-body :schema="viewData" :show-help="false" /> -->
    <!-- </div> -->
  </div>
</template>

<script>
// import { Base64 } from "js-base64";

import Amis from "@/components/Amis/index.vue";

export default {
  name: "AmisPage",
  props: {},
  components: {
    amis: Amis,
  },
  filters: {
    filterVal(val) {
      if (val || val == 0) {
        return val;
      } else {
        return "--";
      }
    },
  },
  data() {
    return {
      commandInfo: {
        dialog: false,
      },
      dialog: true,
      loading: false,
      viewData: {
        type: "page",
        body: [
          {
            id: "u:ed514aa67bce",
            api: {
              url: "/iotapi/amis/Device?where=%7B%22product%22%3A%22d65fe27125%22%2C%22name%22%3A%7B%22regex%22%3A%22${name}%22%7D%7D",
              data: {
                "&": "$$",
                count: "objectId",
                orderBy: "objectId",
                orderDir: "desc",
              },
              method: "get",
            },
            type: "crud",
            filter: {
              body: [
                {
                  name: "name",
                  type: "input-text",
                  label: "场景名称",
                },
              ],
              title: "查询条件",
            },
            columns: [
              {
                name: "objectId",
                type: "text",
                label: "ID",
              },
              {
                name: "name",
                type: "text",
                label: "场景名称",
              },
              {
                name: "content.username",
                type: "text",
                label: "用户名",
              },
              {
                name: "content.password",
                type: "text",
                label: "密码",
              },
              {
                name: "content.myUrl",
                type: "image",
                label: "图片",
                enlargeAble: true,
              },
              {
                type: "operation",
                label: "操作",
                buttons: [
                  {
                    type: "button",
                    label: "修改",
                    level: "primary",
                    dialog: {
                      body: [
                        {
                          api: {
                            url: "/iotapi/amis/Device/${objectId}",
                            data: {
                              "&": "$$",
                            },
                            method: "put",
                            requestAdaptor:
                              "api.data.devaddr = 'sence'+new Date().getTime()\r\nif(api.data.replaceUrl)\r\napi.data.content.myUrl = api.data.replaceUrl\r\ndelete api.data.myUrl\r\n// delete api.data.path\r\ndelete api.data.replaceUrl\r\nreturn {\r\n  ...api\r\n}",
                          },
                          body: [
                            {
                              name: "name",
                              type: "input-text",
                              label: "名称",
                            },
                            {
                              name: "content.username",
                              type: "input-text",
                              label: "用户名",
                            },
                            {
                              name: "content.password",
                              type: "input-text",
                              label: "密码",
                            },
                            {
                              id: "u:db324bf56515",
                              mode: "horizontal",
                              name: "myUrl",
                              type: "input-file",
                              label: "替换图片",
                              accept: ".png,.jpg",
                              autoFill: {
                                replaceUrl: "${path}",
                              },
                              btnLabel: "选择",
                              chunkApi: "/upload",
                              receiver: {
                                url: "/upload",
                                data: null,
                                method: "post",
                                sendOn: "",
                                requestAdaptor:
                                  '    var file = api.data\r\n var jsonData = { file: \'\' }\r\n   file.forEach((value, key) => {\r\n     jsonData[key] = value\r\n   });\r\n     console.log(jsonData);\r\n     console.log(\'token\', \'authorization\')\r\n      var data = new FormData();\r\n      let token = Cookies.get("dgiot_auth_token")\r\n      let path = `dgiot_file/scene/device/`\r\n      let time = new Date().getTime()\r\n      data.append("file", jsonData.file);\r\n      data.append("scene", "app");\r\n      data.append("filename", time + \'.png\');\r\n      data.append("output", "json");\r\n      data.append("path", path);\r\n      data.append("auth_token", token);\r\n      data.append("code", "");\r\n      data.append("submit", "upload");\r\n      console.log(\'data内容\', data)\r\nreturn {\r\n    ...api,\r\n     data: data\r\n};',
                              },
                              useChunk: "auto",
                              chunkSize: 5242880,
                              fileField: "file",
                              autoUpload: true,
                              startChunkApi: "/api/upload/startChunk",
                              finishChunkApi: "/api/upload/finishChunk",
                              hideUploadButton: false,
                            },
                            {
                              name: "replaceUrl",
                              type: "input-text",
                              label: "图片",
                              readOnly: true,
                            },
                            {
                              name: "content.myUrl",
                              type: "image",
                              label: "图片",
                              title: "原图",
                              className: "m-l-lg p-l-lg",
                              closeOnEsc: false,
                              closeOnOutside: false,
                              showCloseButton: true,
                            },
                            {
                              name: "replaceUrl",
                              type: "image",
                              label: "图片",
                              title: "替换图片",
                              className: "m-l-lg p-l-lg",
                            },
                          ],
                          type: "form",
                        },
                      ],
                      type: "dialog",
                      title: "弹框标题",
                    },
                    actionType: "dialog",
                  },
                  {
                    api: {
                      url: "/iotapi/amis/Device/${objectId}",
                      method: "delete",
                    },
                    type: "button",
                    label: "删除",
                    level: "danger",
                    actionType: "ajax",
                    confirmText: "确定要删除？",
                  },
                ],
              },
            ],
            features: ["create", "delete"],
            messages: {},
            bulkActions: [],
            itemActions: [],
            placeholder: "-",
            syncLocation: false,
            headerToolbar: [
              {
                type: "button",
                label: "新增",
                level: "primary",
                dialog: {
                  body: [
                    {
                      api: {
                        url: "/iotapi/amis/Device",
                        data: {
                          "&": "$$",
                          "product.__type": "Pointer",
                          "product.objectId": "d65fe27125",
                          "product.className": "Product",
                        },
                        method: "post",
                        requestAdaptor:
                          "api.data.devaddr = 'sence'+new Date().getTime()\r\nlet department = localStorage.getItem('rolename') || 'admin'\r\napi.data.ACL = {\r\n  \"role:获客管理\":{\r\n    read:true,\r\n    write:true,\r\n  }\r\n}\r\ndelete api.data.myUrl\r\ndelete api.data.path\r\nreturn {\r\n  ...api\r\n}",
                      },
                      body: [
                        {
                          name: "name",
                          type: "input-text",
                          label: "名称",
                        },
                        {
                          name: "content.username",
                          type: "input-text",
                          label: "用户名",
                        },
                        {
                          name: "content.password",
                          type: "input-text",
                          label: "密码",
                        },
                        {
                          id: "u:db324bf56515",
                          mode: "horizontal",
                          name: "path",
                          type: "input-file",
                          label: "选择图片",
                          accept: ".png,.jpg",
                          autoFill: {
                            "content.myUrl": "${path}",
                          },
                          btnLabel: "选择",
                          chunkApi: "/upload",
                          receiver: {
                            url: "/upload",
                            data: null,
                            method: "post",
                            sendOn: "",
                            requestAdaptor:
                              '    var file = api.data\r\n var jsonData = { file: \'\' }\r\n   file.forEach((value, key) => {\r\n     jsonData[key] = value\r\n   });\r\n     console.log(jsonData);\r\n     console.log(\'token\', \'authorization\')\r\n      var data = new FormData();\r\n      let token = Cookies.get("dgiot_auth_token")\r\n      let path = `dgiot_file/scene/device/`\r\n      let time = new Date().getTime()\r\n      data.append("file", jsonData.file);\r\n      data.append("scene", "app");\r\n      data.append("filename", time + \'.png\');\r\n      data.append("output", "json");\r\n      data.append("path", path);\r\n      data.append("auth_token", token);\r\n      data.append("code", "");\r\n      data.append("submit", "upload");\r\n      console.log(\'data内容\', data)\r\nreturn {\r\n    ...api,\r\n     data: data\r\n};',
                          },
                          useChunk: "auto",
                          chunkSize: 5242880,
                          fileField: "file",
                          autoUpload: true,
                          startChunkApi: "/api/upload/startChunk",
                          finishChunkApi: "/api/upload/finishChunk",
                          hideUploadButton: false,
                        },
                        {
                          name: "content.myUrl",
                          type: "input-text",
                          label: "图片",
                          readOnly: true,
                        },
                      ],
                      type: "form",
                    },
                  ],
                  type: "dialog",
                  title: "新增",
                },
                actionType: "dialog",
              },
              "bulkActions",
            ],
            perPageAvailable: [10],
          },
        ],
      },
      dialogEvidenceVisible: false,
      receiceEvidence: {},
      query: {}, //查询条件
      asideShow: true, //侧边页数
      dialogTopoVisible: false,
      deviceInfo: {},
      reportInfo: {},
      reportDialog: false,
      officeapps: "",
      //数据采集
      management: {
        dialog: false,
        data: {},
      },
      managementactiveName: "0",
      machinelist: [],
      timer: "",
      nowTime: "",
      activeName1: "first",
      thirdtbKey: new Date().getTime(),
      collectionInfo: {},
      drawxnqxPath: "",
      profiledrawxnqxPath: "",
      thingdata: [],
      realtimedata: [],
      thingcolumns: [],
      historycolumns: [],
      historydata: [],
      historyEvidence: [],
      historyEvidenceid: "",
      visible: false,
      maxheight: "480",
      loadfilepath: "",
      drawdata: {},
      performancefilepath: "",
      loadremark1: "",
      loadremark2: "",
      loadremark3: "",
      performanceremark1: "",
      performanceremark2: "",
      performanceremark3: "",
      // schema:{},
    };
  },
  computed: {
    dragOptions() {
      return {
        animation: 600,
        group: "description",
      };
    },
    finallyColumns() {
      return this.columns.filter((item) => this.checkList.includes(item.label));
    },
  },
  watch: {},
  async created() {},
  async mounted() {},
  methods: {},
  destroyed() {},
};
</script>
<style scoped>
/* @import url('../AmisPage/style/themeBlack.css'); */
</style>
<style lang="scss" scoped>
.index-container {
  width: 100%;
  height: 95vh;
  .dialog_wrap {
    height: 100%;
    width: 100%;
    overflow: scroll;
  }
}
.evidence_body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .evidence_header {
    height: 50px;
  }
  .evidence_container {
    height: calc(100% - 50px);
  }
}
// 设备组态
.topo_wrap {
  position: fixed;
  top: 0%;
  left: 0%;
  // transform: translate(-50%, -50%);
  z-index: 99;
  height: 100%;
  background-color: rgba(114, 118, 122, 0.5);
  width: 100%;
  .topo_contentwrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    height: 730px;
    background-color: #fff;
    width: 1200px;
  }
  .topo_title_top {
    padding: 2px 4px;
    margin-bottom: 10px;
    height: 30px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    color: #000;
    font-size: 26px;
  }
  // background-color: #fff;
}
::v-deep {
  .el-header {
    background-color: #027be3;
    display: flex;
    align-items: center;
  }
  .el-dialog__body {
    padding: 0 !important;
    height: 100%;
  }
}
::v-deep {
  .dgiot_flex_15 {
    flex: 0 0 15% !important;
  }
  .dgiottree .antd-Tree {
    height: 600px;
    overflow-y: scroll;
  }
  .antd-Page-body {
    padding: 0;
  }

  .antd-Form .antd-Form-item::after {
    border-bottom: 0;
  }
  // dgiot 列表crud
  .dgiot_list {
    padding: 0;
    border: 0;
    .antd-List-items {
      border-top: 0;
      margin-bottom: 0;
      border-bottom: 0;
    }
    .antd-ListItem:nth-child(2n) {
      background-color: #f8f8f8;
    }
  }
  // 智能客服
  .dgiot_chat {
    ::-webkit-scrollbar {
      width: 12px;
    }
    /*里面的代码可以根据自己需求去进行更改*/
    /* 设置滚动条的样式 */
    ::-webkit-scrollbar {
      width: 12px;
    }
    /* 滚动槽 */
    ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      border-radius: 10px;
    }
    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(29, 56, 111, 0.9);
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    }
    /* ::-webkit-scrollbar-thumb:window-inactive {
      background-color: #2472ea;
    } */
    .antd-TextareaControl > textarea {
      background-color: rgba(255, 255, 255, 0.8);
      color: #000;
    }
    .antd-Panel {
      background-color: rgba(255, 255, 255, 0.8);
      color: #000;
      margin: 10px;
    }
    .antd-Page-title {
      color: #fff;
    }
    .antd-Panel--default {
      border-color: rgba(255, 255, 255, 0.8);
    }
    .dgiot_tabs {
      background-color: rgba(255, 255, 255, 0.8);
      height: 80vh;
      margin: 0 10px 0 0;
    }
  }
}
</style>
